<template>
   <div id="todo-list-example">
       <div>
        <ul class="list">
           
            
            <li  v-for="(todo,index) in todos" :key="index"  >
                 <van-swipe-cell>
                <div class="list">
                    <!-- <div class="p"><span class="value">名称</span><input type="text" placeholder="请输入用物资名称" v-model="todo.name"></div>
                    <div class="p"><span class="value">型号</span><input type="text" placeholder="请输入用物资型号" v-model="todo.model"></div>
                    <div class="p"><span class="value">数量</span><input type="text" placeholder="请输入用物资数量" v-model="todo.num"></div>
                    <div class="p"><span class="value">单位</span><input type="text" placeholder="请输入用物资单位" v-model="todo.unit"></div> -->
                     <van-field  label="名称" placeholder="请输入用物资名称" v-model="todo.name"/>
                     <van-field  label="型号" placeholder="请输入用物资型号" v-model="todo.model"/>
                     <van-field  label="数量" placeholder="请输入用物资数量" v-model="todo.num"/>
                     <!-- <van-field  label="单位" placeholder="请输入用物资单位" v-model="todo.unit"/> -->
                     <van-field readonly clickable label="单位" :value="todo.unit" placeholder="请输入用物资单位" @click="showPicker = true"/>
                </div>
                 <template #right>
               <van-button square text="删除" type="danger" class="delete-button" @click="dele(index)"/>
            </template>
            </van-swipe-cell>
            </li>
            
        </ul>
        </div>
        <van-popup v-model="showPicker" round position="bottom">
            <van-picker
                show-toolbar
                :columns="columns"
                @cancel="showPicker = false"
                @confirm="onConfirm"
            />
            </van-popup>

        <div class="btn">
            <van-button type="primary" @click="add" class="add">添加</van-button>
            <van-button type="primary" @click="submit"  class="submit">提交</van-button>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import { getCookie } from "Utils/cookie";
import Vue from 'vue';
import { Toast } from 'vant';
export default {
    data(){
        return {
             todos:[
                {name:'',num:'',model:'',unit:''}
            ],
            showPicker: false,
            columns: [],
            unit:[],
        }
          
    },
    methods:{
        add:function(){
            let obj={name:'',num:'',model:'',unit:''}
            this.todos.push(obj)
            console.log('length',this.todos.length)
            // this.todos.splice(this.todos.length-1, 1)
        },
        submit:function(){
            if(getCookie('user_flag') != '1'){
                Toast.fail('您的权限不符');
            }else{
                 var obj = []
            for(var i=0 ;i<this.todos.length; i++){
                obj.push({
                    product_name:this.todos[i].name,
                    product_type:this.todos[i].model,
                    buy_num:this.todos[i].num,
                    unit:this.unit[i],
                })
            }
                this.$router.push({
                    path:'/goods_buy',
                    query:{
                        list:obj
                    }
                })
            }
        },
        dele(index){
            this.todos.splice(index, 1);
        },
         onConfirm(value,index) {
             console.log(value)
             console.log(this.unit)
            this.todos[this.todos.length-1].unit = value;
            this.showPicker = false;
        },
    },
    mounted(){
        axios({
            url:'/hrkc/buyApply/queryUnit',
            methods:'GET',
        }).then(res=>{
            console.log('单位',res)

            for(var i=0; i<res.data.length; i++){
                 this.columns.push(res.data[i].item_text)
                 this.unit.push(res.data[i].item_value)
            }
           
        })
    }
    
}
</script>
<style lang="scss" scoped>
    .p{
        border-bottom: 1px solid #ccc;
        height:44px;
        background-color:#fff; 
        
    }
    .p:nth-child(4){
        border: 0px;
    }
    .value{
        display: inline-block;
        text-align: center;
        width:87px;
        height:24px;
        padding-top: 10px;
    }
    input{
        border: 0px;
    }
    // .van-button{
    //     margin: 10px 20px 10px 80px;
    // }
    #todo-list-example{
        height: 610px;
        overflow: scroll;
        background-color: #F7F8FA;
       
    }
    .btn{
        width:100%;
        height:60px;
        position: absolute;
        bottom:0px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
    }
    .add{
        height: 60px;
        width: 100px;
        font-size: 18px;
    }
    .submit{
        height: 60px;
        width: 100px;
        font-size: 18px;
    }
    .list{
        border-radius:15px; 
        margin-bottom: 30px;
    }
    .delete-button {
    height: 100%;
  }

</style>